<div>
  <h2 ng-i18next>avAdmin.sidebar.censusConfig</h2>

  <p class="text-muted" ng-i18next>avAdmin.censusConfig.intro</p>

  <h4 class="header-block">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span ng-i18next>avAdmin.census.configurationHeader</span>
  </h4>

  <form role="form" class="form form-horizontal">
    <!-- Registration -->
    <div class="form-group">
      <label class="col-sm-2" ng-i18next>
        avAdmin.census.reg.label
      </label>
      <div class="col-sm-10">
        <p class="text-muted">
          <span ng-i18next>
            avAdmin.census.reg.placeholder
          </span>
          <a href="" class="learn-more" target="_blank" ng-i18next>
            avAdmin.learnMore
          </a>
        </p>
        <label
          for="census{{o}}"
          class="radio"
          ng-repeat="o in census"
          ng-class="{'selected': election.census.census === o, 'disabled': !electionEditable()}">
          <input
            id="census{{o}}"
            type="radio"
            name="reg"
            ng-disabled="!electionEditable()"
            value="{{ o }}" ng-model="election.census.census" />
          <span class="header" ng-i18next="avAdmin.census.census.{{ o }}">
          </span>
          <span
            class="description"
            ng-i18next="avAdmin.census.census.{{ o }}Description">
          </span>
          <a href="" class="learn-more" target="_blank" ng-i18next>
            avAdmin.learnMore
          </a>
        </label>
      </div>
    </div>
  </form>

  <div class="extra-fields-affix-placeholder"></div>
  <h4
    class="header-block extra-fields"
    av-affix-top-offset="50"
    affix-placeholder=".extra-fields-affix-placeholder">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span ng-i18next>avAdmin.census.extraFieldsHeader</span>

      <button
        class="btn btn-success pull-right"
        type="button"
        ng-if="electionEditable()"
        ng-click="addEf()">
        <i class="fa fa-plus"></i>
        <span ng-i18next>avAdmin.census.add</span>
      </button>
  </h4>

  <form role="form" class="form form-horizontal">
    <div class="form-group">
      <p>
        <span ng-i18next>
          avAdmin.census.extraFieldsInfo
        </span>
        <a href="" class="learn-more" target="_blank" ng-i18next>
          avAdmin.learnMore
        </a>
      </p>

      <div ng-if="electionEditable()">
        <div
          class="extra-fields-wrapper disable-select"
          dnd-list="election.census.extra_fields">
          <div
            av-extra-field
            ng-repeat="field in election.census.extra_fields"
            dnd-draggable="field"
            ng-if="!field.must"
            dnd-disable-if="!electionEditable() || extra_fields.editing === election.census.extra_fields[$index]"
            ng-class="{enabled: electionEditable()}"
            dnd-moved="election.census.extra_fields.splice($index, 1)"
            dnd-effect-allowed="move">
          </div>
        </div>
        <div
          av-extra-field
          ng-repeat="field in election.census.extra_fields"
          ng-if="field.must">
        </div>
      </div>
      <div ng-if="!electionEditable()">
        <div class="extra-fields-wrapper disable-select">
          <div
            av-extra-field
            ng-repeat="field in election.census.extra_fields">
          </div>
        </div>
      </div>
  </form>

    <button ui-sref="admin.census()" ng-if="!election.id" class="btn btn-block btn-success" ng-i18next>next</button>
</div>
